import React, { useState } from 'react';
import { Input, Button, message } from 'antd';
import { getAssetPath } from '@/utils/assetPath';

interface SearchSectionProps {
  searchResults: { nickname: string; avatar: string; id?: number };
  onSearch?: (phone: string) => Promise<any>;
}

const SearchSection: React.FC<SearchSectionProps> = ({ searchResults, onSearch }) => {
  const [searchValue, setSearchValue] = useState('');
  const [searching, setSearching] = useState(false);
  
  // 验证手机号格式
  const isValidPhoneNumber = (phone: string): boolean => {
    const phoneRegex = /^1[3-9]\d{9}$/;
    return phoneRegex.test(phone);
  };
  
  const handleSearch = async () => {
    if (!searchValue.trim()) {
      message.warning('请输入手机号');
      return;
    }
    
    // 验证手机号格式
    if (!isValidPhoneNumber(searchValue)) {
      message.error('请输入正确的11位手机号码');
      return;
    }
    
    setSearching(true);
    try {
      if (onSearch) {
        await onSearch(searchValue);
      } else {
        // 如果未提供 onSearch 函数，使用默认实现
        console.log('搜索手机号:', searchValue);
        message.info(`搜索功能尚未实现，您搜索的手机号是: ${searchValue}`);
      }
    } catch (error: any) {
      console.error('搜索失败:', error);
      message.error(error.message || '搜索失败，请重试');
    } finally {
      setSearching(false);
    }
  };

  return (
    <div style={{ 
      display: 'flex', 
      flexDirection: 'column', 
      alignItems: 'center', 
      marginBottom: '20px', 
      backgroundImage: `url('${getAssetPath('/pay/background.png')}')`, 
      backgroundSize: 'cover', 
      backgroundPosition: 'center', 
      borderRadius: '8px', 
      padding: '0'
    }}>
      <h1 style={{ fontSize: '20px', color: 'white', marginBottom: '20px' }}>充值</h1>
      <div style={{ 
        display: 'flex', 
        flexDirection: 'column', 
        alignItems: 'center', 
        width: '100%'
      }}>
        {/* 搜索框部分 */}
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px', width: '85%', maxWidth: '360px' }}>
          <Input
            placeholder="请输入手机号"
            style={{ 
              flex: 1, 
              borderRadius: '4px',
              paddingLeft: '12px'
            }}
            value={searchValue}
            onChange={(e) => {
              // 只允许输入数字
              const value = e.target.value.replace(/[^\d]/g, '');
              setSearchValue(value);
            }}
            maxLength={11}
          />
          <Button 
            type="primary" 
            loading={searching}
            onClick={handleSearch}
            style={{ 
              marginLeft: '10px',
              background: 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)',
              boxShadow: '0 2px 6px rgba(24, 144, 255, 0.2)'
            }}
          >
            搜索
          </Button>
        </div>
        
        {/* 用户信息部分 */}
        <div style={{ 
          display: 'flex', 
          alignItems: 'center', 
          gap: '15px', 
          padding: '5px 0 20px 0', // 增加底部间距，与顶部间距保持一致
          width: '85%',
          maxWidth: '360px',
        }}>
          <div style={{ 
            width: '70px', 
            height: '70px', 
            borderRadius: '50%', 
            overflow: 'hidden',
            boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
            border: '2px solid rgba(255, 255, 255, 0.6)'
          }}>
            <img 
              src={searchResults.avatar} 
              alt={searchResults.nickname} 
              style={{ width: '100%', height: '100%', objectFit: 'cover' }} 
            />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
            <span style={{ 
              fontWeight: 'bold', 
              fontSize: '18px', 
              marginBottom: '5px',
              color: 'white',
              textShadow: '0 1px 2px rgba(0, 0, 0, 0.3)'
            }}>
              {searchResults.nickname}
            </span>
            {searchResults.id && (
              <span style={{ 
                fontSize: '14px', 
                color: 'rgba(255, 255, 255, 0.85)',
                textShadow: '0 1px 2px rgba(0, 0, 0, 0.3)'
              }}>
                ID: {searchResults.id}
              </span>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default SearchSection;
